<template>
	<div class="Host_WZZS_gauge_page" ref="gaugeRef" :style="{ ...customStyle }"></div>
</template>

<script setup>
import { isEmptyToCharacterfn } from '@/plugins/index.js'
let Echarts = inject('$echarts')
let gaugeRef = ref(null)
let gaugeEchartInstance = ref(null)

let props = defineProps({
	value: {
		type: Number,
		default: 0
	},
	min: {
		type: Number,
		default: 0
	},
	max: {
		type: Number,
		default: 100
	},
	text: {
		type: String
	},
	customStyle: {
		type: Object,
		default() {
			return {}
		}
	}
})
let option = ref({
	tooltip: {
		formatter: '{a} <br/>{b} : {c}r/min'
	},
	series: [
		{
			name: 'Pressure',
			type: 'gauge',
			min: props.min,
			max: props.max,
			progress: {
				show: true
			},
			splitNumber: 4,
			splitLine: {
				length: 15,
				lineStyle: {
					width: 2,
					color: '#999'
				}
			},
			detail: {
				color: '#999',
				valueAnimation: true,
				formatter: '{value}r/min',
				offsetCenter: [0, 70],
				fontSize: 20
				// padding:50
			},
			axisLabel: {
				color: '#999'
			},
			title: {
				show: true,
				fontSize: 20,
				textStyle: {
					color: '#fff'
					// offsetCenter:[0,30]
				},
				offsetCenter: [0, 100]
			},
			data: [
				{
					value: props.value,
					name: props.text
				}
			]
		}
	]
})
watch(
	() => props.value,
	(newVal, oldVal) => {
		option.value.series[0].data[0].value = newVal
		handleDrawGauge()
	}
)
let handleDrawGauge = () => {
	gaugeEchartInstance.value.setOption(option.value)
	// console.log(gaugeRef.value)
}
onMounted(() => {
	gaugeEchartInstance.value = Echarts.init(gaugeRef.value)
	handleDrawGauge()
})
</script>

<style scoped lang="scss">
.Host_WZZS_gauge_page {
	width: 250px;
	height: 350px;
}
</style>
